<template>
  <div class="container">
    <div class="left">
      <div>{{ drag ? '拖拽中' : '拖拽停止' }}</div>
      <el-input-number v-model="inputValue" :min="1" :max="10" label="描述文字" />


      <el-input
        class="search-input"
        style="margin-bottom: 10px;"
        placeholder="请输入搜索内容"
        v-model="searchKeyword"
        maxlength="20"
        clearable
        @input="handleSearch"

      />
      <div class="scrollable-content">
        <draggable
          chosenClass="chosen"
          v-model="filteredItems" 
          :group="groupLeft"
          animation="1000" 
          @start="onStart" 
          @end="onEnd"
          :move="checkMove"
        >
          <transition-group tag="div">
            <div 
              class="item" 
              v-for="element in filteredItems" 
              :key="element.pkId"
              :class="{'disabled': isItemInRight(element)}"
              
              >
              {{ element.authApiName }}
            </div>
          </transition-group>
        </draggable>
      </div>

    </div>
    <div class="right">
      <div class="table-container">
        <table class="table table-striped">
          <thead class="sticky">
            <tr>
              <th scope="col">鉴权接口名称</th>
              <th scope="col">鉴权接口入参</th>
              <th scope="col">映射字段</th>
              <th scope="col">操作</th>
            </tr>
          </thead>
          <draggable 
            handle=".drag-handle"
            tag="tbody"
            item-key="pkId"
            v-model="rightItems" 
            :group="groupRight" 
            animation="1000"
            @add="onAdd"
            @start="onStart" 
            @end="onRightEnd"
          >
            <template v-if="rightItems.length === 0">
              <tr>
                <td colspan="4" style="height: 200px; text-align: center; vertical-align: middle;">
                  <div style="height: 200px; display: flex; align-items: center; justify-content: center; background-color: #f0f0f0;">
                    暂无数据
                  </div>
                </td>
              </tr>
            </template>
            <tr class="table-row" v-for="(item, index) in rightItems" :key="item.pkId">
              <td> {{ item.authApiName }}</td>
              <td>
                <ul class="params-list">
                  <li v-for="param in item.inputList" :key="param.code">{{ param.name }}</li>
                </ul>
              </td>
              <td>
                <div v-for="(param, index) in item.inputList" :key="index">
                    <selectTree 
                      class="mapping-field"
                      v-model="param.mappingField" 
                      :data="transformedData" 
                      placeholder="请输入选择映射字段"
                      :disabled="setting.disabled" 
                      :clearable="setting.clearable"
                      :hide-on-selected="setting.hideOnSelected" 
                      :only-leaf="setting.onlyLeaf" 
                      :filterable="setting.filterable"
                      >
                    </selectTree>
                    <p>选中值：{{param.mappingField}}</p>
                    <!-- v-if="param.incompatibleDsc" -->
                    <p  class="incompatible">不兼容:{{ param.incompatibleDsc }}</p>



                </div>
              </td>
              <td>
                <el-button type="danger" @click="removeItem(index)">删除</el-button>
                <el-button size="mini" @click="moveUp(index)" :disabled="index === 0">上移</el-button>
                <el-button size="mini" @click="moveDown(index)" :disabled="index === item.length - 1">下移</el-button>
                <span class="drag-handle" style="cursor: move;">⇅</span> <!-- 拖动句柄 -->
              </td>
            </tr>
          </draggable>
        </table>
        <div class="bottom-fixed">
          <el-button  @click="printRightItems">保存</el-button>
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import selectTree from './selectTree.vue';
import draggable from 'vuedraggable';
const originalData =  {
  bodyParas: [
    {
      code:'request',
      name:'request',
      type: 'object',
      required:"1",
      children: [
        {
          code:'adouble',
          name:'adouble',
          type: 'object',
          required:"0",
          type: 'number',
          children:[]
        },
        {
          code:'adouble2',
          name:'adouble2',
          type: 'object',
          required:"0",
          type: 'number',
          children:[]
        },
        {
          code:'adouble3hasChildren',
          name:'adouble3hasChildren',
          type: 'object',
          required:"0",
          children:[
            {
              code:'Children1',
              name:'Children1',
              type: 'number',
              required:"1",
              children:[]
            },
            {
              code:'Children2',
              name:'Children2',
              type: 'number',
              required:"1",
              children:[]
            },
            {
              code:'Children3',
              name:'Children3',
              type: 'number',
              required:"1",
              children:[]
            },
          ]
        }
      ]
    }
  ],
  pathParas: [
    {
      code:'path1',
      name:'path1',
      type: 'number',
      required:"1",
      children:[]
    },
    {
      code:'path2',
      name:'path2',
      type: 'number',
      required:"1",
      children:[]
    }
  ],
  queryPara: [
    // {
    //   code:'query1',
    //   name:'query1',
    //   type: 'number',
    //   required:"1",
    //   children:[]
    // },
    // {
    //   code:'query2',
    //   name:'query2',
    //   type: 'number',
    //   required:"1",
    //   children:[]
    // }
  ]
}
// 将每个节点添加上nodePath
function addNodePath(data, parentPath = '') {
  return data
    .filter(item => item.required=== "1")//// 过滤 required 为 true 的节点
    .map(item => {
      const nodePath = parentPath ? `${parentPath}.${item.code}` : item.code;
      const children = item.children ? addNodePath(item.children, nodePath) : [];
      // 只有当有子节点或没有 `children` 属性时才保留该节点
        return {
          ...item,
          nodePath,
          children
        };
    })
}


function transformToStep1(objectData) {
  return Object.keys(objectData).map(key => ({
    nodePath: key,
    code: key,
    name:key,
    children: addNodePath(objectData[key], key)
  }));
}

// 调用函数并输出结果
const transformedData = transformToStep1(originalData);

console.log('transformedData',JSON.stringify(transformedData, null, 2));


export default {
  name: 'draggableDemo',
  components: {
    draggable,
    selectTree,
  },
  data() {
    return {
      inputValue:"",
      setting: {
        disabled: false,
        clearable: true,
        hideOnSelected: true,

        filterable: true,
        onlyLeaf: true,
        text: '',
      },

      transformedData,//真实业务数据
      treeValue:"",
      drag: false,
      searchKeyword: '',
      startX: 0,
      startY: 0,
      leftItems: [
        {
          authApiCode: 'myManage1',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户1',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId1', name: '客户号1', type: 'string' },
            { code: 'userId1', name: '用户号1', type: 'string' },
          ],
          pkId: '1',
        },
        {
          authApiCode: 'myManage2',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户2',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId2', name: '客户号2', type: 'string' },
            { code: 'userId2', name: '用户号2', type: 'string' },
          ],
          pkId: '2',
        },
        {
          authApiCode: 'myManage3',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户3',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId3', name: '客户号3', type: 'string' },
            { code: 'userId3', name: '用户号3', type: 'string' },
          ],
          pkId: '3',
        },
        {
          authApiCode: 'myManage1',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户1',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId1', name: '客户号1', type: 'string' },
            { code: 'userId1', name: '用户号1', type: 'string' },
          ],
          pkId: '4',
        },
        {
          authApiCode: 'myManage2',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户2',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId2', name: '客户号2', type: 'string' },
            { code: 'userId2', name: '用户号2', type: 'string' },
          ],
          pkId: '5',
        },
        {
          authApiCode: 'myManage3',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户3',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId3', name: '客户号3', type: 'string' },
            { code: 'userId3', name: '用户号3', type: 'string' },
          ],
          pkId: '6',
        },
        {
          authApiCode: 'myManage1',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户1',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId1', name: '客户号1', type: 'string' },
            { code: 'userId1', name: '用户号1', type: 'string' },
          ],
          pkId: '7',
        },
        {
          authApiCode: 'myManage2',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户2',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId2', name: '客户号2', type: 'string' },
            { code: 'userId2', name: '用户号2', type: 'string' },
          ],
          pkId: '8',
        },
        {
          authApiCode: 'myManage3',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户3',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId3', name: '客户号3', type: 'string' },
            { code: 'userId3', name: '用户号3', type: 'string' },
          ],
          pkId: '9',
        },
        {
          authApiCode: 'myManage1',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户1',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId1', name: '客户号1', type: 'string' },
            { code: 'userId1', name: '用户号1', type: 'string' },
          ],
          pkId: '10',
        },
        {
          authApiCode: 'myManage2',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户2',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId2', name: '客户号2', type: 'string' },
            { code: 'userId2', name: '用户号2', type: 'string' },
          ],
          pkId: '11',
        },
        {
          authApiCode: 'myManage3',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户3',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId3', name: '客户号3', type: 'string' },
            { code: 'userId3', name: '用户号3', type: 'string' },
          ],
          pkId: '12',
        },
        {
          authApiCode: 'myManage3',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户3',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId3', name: '客户号3', type: 'string' },
            { code: 'userId3', name: '用户号3', type: 'string' },
          ],
          pkId: '13',
        },
        {
          authApiCode: 'myManage3',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户3',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId3', name: '客户号3', type: 'string' },
            { code: 'userId3', name: '用户号3', type: 'string' },
          ],
          pkId: '14',
        },
        {
          authApiCode: 'myManage3',
          authApiDsc: '包含财富管户，私营管户',
          authApiName: '我的主管户3',
          inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
          inputList: [
            { code: 'custId3', name: '客户号3', type: 'string' },
            { code: 'userId3', name: '用户号3', type: 'string' },
          ],
          pkId: '15',
        },
      ],
      draggedItem: null, // 新增属性
      rightItems: [],
      groupLeft: {
        name: 'items',
        pull: 'clone',
        put: false
      },
      groupRight: {
        name: 'items',
        pull: false,
        put: true
      },
      defaultProps: {
        children: 'children',//指定子节点属性名
        label: 'name',// 指定节点标签的属性名
        code: 'code',
        type:'type',
      },
      TreeData: [
        {
          name:'bodyParas',
          children:[
            {
              children: [
                {
                  children: [],
                  code:'adouble',
                  name:'adouble',
                  nodePath:'request.adouble',
                  required:"0",
                  type:'number',
                },
                {
                  children: [],
                  code:'adouble2',
                  name:'adouble2',
                  nodePath:'request.adouble2',
                  required:"0",
                  type:'number',
                },
                {
                  children: [],
                  code:'afloat',
                  name:'afloat',
                  nodePath:'request.afloat',
                  required:"0",
                  type:'number',
                },
                {
                  children:[
                    {
                      children: [],
                      name:'integer',
                      nodePath:'request.children.integer',
                      required:"0",
                      type:'number',
                    },
                    {
                      children: [],
                      name:'str',
                      nodePath:'request.children.str',
                      required:"0",
                      type:'string',
                    },
                    {
                      children: [],
                      name:'str2',
                      nodePath:'request.children.str2',
                      required:"0",
                      type:'string',
                    },
                    {
                      children: [],
                      name:'str3',
                      nodePath:'request.children.str3',
                      required:"0",
                      type:'string',
                    },
                  ],
                  code:'children1',
                  name:'children1',
                  nodePath:'request.children1',
                  required:"0",
                  type:'object',
                }
              ],
              code:'request',
              name:'request',
              nodePath:'request',
              required:"1",
              type:'object',
            }
          ]
        },
        {
          name:'pathParas',
          children:[
            {
              code:'id',
              name:'id',
              nodePath:'id',
              required:"1",
              type:'string',
            },
            {
              code:'type',
              name:'type',
              nodePath:'type',
              required:"1",
              type:'string',
            },
          ]
        },
        {
          name:'queryParas',
          children:[
            {
              code:'id',
              name:'id',
              nodePath:'id',
              required:"0",
              type:'string',
            },
            {
              code:'type',
              name:'type',
              nodePath:'type',
              required:"0",
              type:'string',
            },
            {
              code:'name',
              name:'name',
              nodePath:'name',
              required:"0",
              type:'string',
            },
          ]
        }
      ],
      selectedNodeKey: null,
      backData: {},
      authRulesfromBack: [{
        authApiId:'1',
        authApiName: '我的主管户1',
        sort: 0,
        inputMapper: [
          {
            argKey: 'custId',
            refType: 'body',
            name:'客户号',
            refValue: 'request'
          },
          {
            argKey: "userId1",
            name: "用户号1",
            refType: 'body',
            refValue: 'request',
          }
        ]
      }],
      rightItemDemoInfo:[
        {
          authApiCode: "myManage1",
            authApiDsc: "包含财富管户，私营管户",
            authApiName: "我的主管户1",
            inputJson: "[{\"code\":\"custId\",\"name\":\"客户号\",\"type\":\"string\"}]",
            inputList: [
                {
                    code: "custId1",
                    name: "客户号1",
                    type: "string",
                    incompatibleDsc: "参数客户号1（request）字段类型不兼容"
                },
                {
                    code: "userId1",
                    name: "用户号1",
                    type: "string",
                    incompatibleDsc: "参数用户号1（request）字段类型不兼容"
                }
            ],
            pkId: "1"
        }
      ]






    }
  },
  computed: {
    filteredItems() {
      if (!this.searchKeyword) {
        return this.leftItems;
      }
      const filteredInfo = this.leftItems.filter(item => 
        item.authApiName.includes(this.searchKeyword)
      );
      return filteredInfo;
    },
    isItemInRight() {
      return (item) => {
        return this.rightItems.some(existingItem => existingItem.pkId === item.pkId);
      };
    }  
  },
  methods: {
    checkMove(evt) {
    const item = evt.draggedContext.element;
    if (this.isItemInRightMethod(item)) {
      // this.$message.warning('该项已存在，不能拖动2222222222');
      return false; // 阻止拖动
    }
    return true; // 允许拖动
  },
    isItemInRightMethod(item) {
      console.log('isItemInRightMethod', item);
      console.log('this.rightItems--isItemInRightMethod', this.rightItems);
      
      return this.rightItems.some(existingItem => existingItem.pkId === item.pkId);
    },
    moveUp(index) {
      if (index > 0) {
        const item = this.rightItems.splice(index, 1)[0];
        this.rightItems.splice(index - 1, 0, item);
      }
    },
    moveDown(index) {
      if (index < this.rightItems.length - 1) {
        const item = this.rightItems.splice(index, 1)[0];
        this.rightItems.splice(index + 1, 0, item);
      }
    },
    handleSearch() {
      console.log('searchKeyword', this.searchKeyword);
      
      // 触发计算属性重新计算
    },
    renderTreeContent(h, { node, data, store }) {
      return h('span', data.authApiName);
    },
    // 开始拖拽事件
    onStart(event) {
      const item = event.item;
      if (item) {
        this.draggedItem = JSON.parse(JSON.stringify(item)); // 深拷贝以避免引用问题
      }
      this.drag = true;
    },
    // 拖拽结束事件
    onEnd() {
      this.drag = false;
      console.log('拖拽停止');
    },
    // 选择事件
    // onChoose(event) {
    //   console.log('选择事件触发---onChoose', event);
      
    // const item = event.item._underlying_vm_;
    //   if (this.isItemInRightMethod(item)) {
    //     this.$message.warning('该项已存在，不能重复添加1111111111111');



    //     event.preventDefault(); // 阻止选择操作
    //   }
    // },
    // 处理拖拽添加事件
    onAdd(event) {
      console.log('拖拽添加事件触发---onAdd', event);
      const item = event.item._underlying_vm_;
      console.log('this.rightItems----onAdd', this.rightItems);
      
      const flag = this.rightItems.some(existingItem => existingItem.pkId === item.pkId);
      if (flag) {
        // this.$message.warning('该项已存在，不能重复添加');
        // 移除重复项
        const index = Array.from(event.to.children).findIndex(child => {
          const childVm = child.__vue__;
          return childVm && childVm.pkId === item.pkId;
        });
        console.log('index----1', index);
        if (index !== -1) {
          event.to.removeChild(event.to.children[index]);
        }
        return;
      }
        // 如果没有重复项，进行深拷贝并添加到右侧列表
        const newItem = JSON.parse(JSON.stringify(item)); // 深拷贝以避免引用问题
        newItem.inputList = newItem.inputList || []; // 确保 inputList 存在
        newItem.inputList.forEach(param => {
          param.mappingField = ''; // 初始化 mappingField
          param.incompatibleDsc = null; // 初始化 incompatibleDsc
        });
        this.rightItems.push(newItem); // 只推入一次
    },
    onRightEnd(event) {
      console.log('event-右侧', event);
    },
    // 删除右侧数据
    removeItem(index) {
        // 获取要删除的项
        const itemToRemove = this.rightItems[index];
        // 如果该项有 inputList，清空其中的 mappingField 内容
        if (itemToRemove.inputList) {
          itemToRemove.inputList.forEach(param => {
            param.mappingField = ''; // 清空映射字段
            param.incompatibleDsc = null; // 初始化 incompatibleDsc
          });
        }
        // 删除右侧项
        this.rightItems.splice(index, 1);
        console.log('删除后右侧数据:', this.rightItems);
    },
    // 打印右侧数据
    printRightItems() {
      console.log(this.rightItems);
      const authRule = this.rightItems.map((item, index) => ({
      authApiId: item.pkId,
      sort: index,
      inputMapper: item.inputList.map(param=> {
        let refType = '';
        let refValue = param.mappingField;
        if (refValue && refValue.startsWith('bodyParas')) {
          refType = 'body';
          refValue = param.mappingField.replace('bodyParas.', '');
        } else if (refValue && refValue.startsWith('pathParas')) {
          refType = 'path';
          refValue = param.mappingField.replace('pathParas.', '');
        } else if (refValue && refValue.startsWith('queryParas')) {
          refType = 'query';
          refValue = param.mappingField.replace('queryParas.', '');
        }
        return {
          argKey: param.code,
          refType: refType,
          refValue: refValue
        };
      })
    }));
    console.log('authRule:', JSON.stringify(authRule, null, 2));


    // 模拟后端返回的数据
    // 2是鉴权规则的数据
    const backData = {
      2: {
        body: [
          {
            apiId: '1',
            incompatibleDsc: '参数客户号1（request）字段类型不兼容',
            paraNodePath: 'custId1',
          },

        ],
        output: [],
        path: [
        {
            apiId: '1',
            incompatibleDsc: '参数用户号1（request）字段类型不兼容',
            paraNodePath: 'userId1',
          },
        ],
        query: []
      }
    };

    // 更新 backData 属性
    this.backData = backData[2];
    console.log(' 后端返回的数据',  this.backData);


    // 根据 backData 更新前端显示
    this.updateIncompatibility(this.backData);

    },
    updateIncompatibility() {
      // 合并后端数据
      const incompatibilities = [
        ...(this.backData.body || []),
        ...(this.backData.output || []),
        ...(this.backData.path || []),
        ...(this.backData.query || [])
      ];
      console.log('incompatibilities--保存方法', incompatibilities);
      
      if (!this.rightItems || this.rightItems.length === 0) {
        console.warn('rightItems 为空，无法更新不兼容提示');
        return;
      }

      if (!incompatibilities || incompatibilities.length === 0) {
        console.warn('incompatibilities 为空，无需更新不兼容提示');
        return;
      }

      // 遍历 rightItems，更新不兼容提示
      this.rightItems.forEach(item => {
        incompatibilities.forEach(incompatibility => {
          // 确保 apiId 匹配
          if (String(item.pkId) === String(incompatibility.apiId)) {
            // 在 inputList 中找到 code 匹配的 param
            const param = item.inputList.find(p => p.code === incompatibility.paraNodePath);
            console.log('param', param);
            
            if (param) {
              this.$set(param, 'incompatibleDsc', incompatibility.incompatibleDsc);
              console.log('更新不兼容提示:', param);
              
            }
          }
        });
      });
    },
    // 初始化后端返回数据给前端处理
    transformAuthRules(authRules) {
      if(!Array.isArray(authRules) || authRules.length === 0) {
        return [];
      }


      return authRules.map(authRule => {
        const {
          authApiId,
          authApiName,
          sort,
          inputMapper
        } = authRule;

      // 构建 inputList
      const inputList = inputMapper.map(input => {
        const refType = input.refType || '';
        const refValue = input.refValue || '';
        const mappingField = refType && refValue ? `${refType}Paras.${refValue}` : '';

        return {
          code: input.argKey,
          name: input.name,
          // type: 'string', // 假设类型为字符串或根据需要调整
          mappingField: mappingField
        };
      });

        // 构建新的对象
        const newItem = {
          pkId: authApiId,
          authApiName: authApiName,
          sort: sort,
          // authApiCode: 'myManage1', // 根据实际情况设置
          // authApiDsc: '包含财富管户，私营管户', // 根据实际情况设置
          inputJson: JSON.stringify(inputList),
          inputList: inputList
        };
        return newItem;
      });
    }
  },
  created() {
    const rightItemDemoInfo = this.transformAuthRules(this.authRulesfromBack);
    console.log('转换后的 rightItemDemoInfo:', rightItemDemoInfo);
    this.rightItems = rightItemDemoInfo;
  },
}
</script>

<style scoped>
.container {
  display: flex;
}

.left {
  width: 300px; /* 固定宽度 */
  background-color: #f0f0f0;
  padding: 10px;
}
.search-input {
  width: 100%;
  margin-bottom: 10px;
}
.scrollable-content {
  overflow-y: auto; /* 添加垂直滚动条 */
  max-height: calc(90vh - 100px); /* 设置最大高度，减去输入框的高度和一些间距 */
}




.right {
  flex: 2; /* 占2/3 */
  min-width: 400px; /* 设置最小宽度 */
  background-color: pink;
  height: 100%;
  padding: 10px;

}
.bottom-fixed {
  position: sticky;
  bottom: 0;
  width: 100%; /* 宽度与父容器一致 */
  display: flex;
  justify-content: center; /* 水平居中 */
  padding: 10px 0; /* 上下内边距 */
  background-color: orange; /* 背景色与表格一致 */
}



.table-container {
  max-height: 70vh; /* 设置表格容器的最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */

}
.sticky {
  position: sticky;
  top: 0;
  background-color: #fff; /* 确保背景色与表格一致 */
  z-index: 1; /* 确保表头在内容上方 */
}
/* 被拖拽对象的样式 */
.item {
  padding: 6px;
  background-color: #fdfdfd;
  /* border: solid 1px #eee; */
  margin-bottom: 10px;
  cursor: move;
}

/* 选中左侧样式 */
.chosen {
  border: solid 2px red !important;
}

.params-list {
  list-style: none;
  padding: 0;
}

.params-list li {
  height: 39px; /* 设置li的高度 */
  line-height: 39px; /* 设置行高，使内容垂直居中 */
}

.mapping-field {
  margin: 10px 0; /* 设置输入框的上下间距 */
}

.scrollable-tbody {
  display: block; /* 或者可以使用 display: flex; */
  max-height: 300px; /* 根据需要设置最大高度 */
  overflow-y: auto; /* 添加滚动条 */
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

.table th,
.table td {
  padding: 10px;
  border: 1px solid #ddd; 
  vertical-align: middle;
}

.table-header {
  background-color: #f9f9f9;
  font-weight: bold;
}

.table-row {
  display: table-row;
  border: 2px dotted orange; 
}

.table-cell {
  display: table-cell;
  padding: 10px;
  border: 1px solid #ddd;
  vertical-align: middle;
}
.item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.incompatible {
  color: red;
  font-weight: bold;
}

/* 去除el-input-number组件鼠标悬浮时的蓝色边框 */
.el-input-number:hover .el-input__inner {
    border-color: inherit; /* 或者设置为你想要的颜色，如果是透明可以使用 transparent */
}
</style>